<template>
   <view class="wrapper row">
    <view class="top">
      <view class="bg"></view>
      <view class="detail u-padding-30">
        <view style="background: #fff;border-radius: 8px;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);" class="u-padding-30">
          <u-form :model="form" ref="uForm" label-width="160" :label-style="label_style">
            <u-form-item label="高考省份" :border-bottom="false">
              <u-input v-model="form.provinceName" type="select" placeholder="请选择" @click="show = true"/>
              <u-select v-model="show" mode="single-column" :list="provinceList" @confirm="res => actionSheetCallback(res, 'provinceName')"></u-select>
            </u-form-item>
            <u-form-item label="首选科目" :border-bottom="false">
              <u-input v-model="form.firstSubject" type="select" placeholder="请选择" @click="show1 = true"/>
              <u-select v-model="show1" mode="single-column" :list="firstSubjectList" @confirm="res => actionSheetCallback(res, 'firstSubject')"></u-select>
            </u-form-item>
            <u-form-item label="目标专业" :border-bottom="false">
              <view @click="toSelect" style="color: #2A6AAA">{{form.specialtyName || '点击选择'}}</view>
            </u-form-item>
            <u-form-item label="您的位次" :border-bottom="false">
              <u-input v-model="form.userOrder" placeholder="请输入您的位次" type="number"/>
            </u-form-item>
          </u-form>
          <u-button type="primary" :custom-style="customStyle" @click="jump('/pages/explore/fill_school')">查询</u-button>
        </view>
      </view>
    </view>
    <view class="u-font-xs color-999 u-text-center" style="color: #CECECE">数据仅供参考，最终解释权归本平台所有！</view>
   </view>
</template>

<script>
import {request} from "../../util/api";
import {getCurrentFullPath, TOAST} from "../../util/util";
import {THEME} from "../mixins/config";

export default {
  data() {
    return {
      form: {
        firstSubject: '物理',
        provinceName: '重庆',
        specialtyName: '',
        userOrder: '',
        uOrS: ''
      },
      customStyle: {
        background: THEME.btn_active_bg_color,
        boxShadow: '0px 2px 3px 0px rgba(0, 0, 0, 0.4)',
        padding: '0 30rpx',
        marginTop: '30px'
      },
      provinceList: [],
      firstSubjectList: [],
      show: false,
      show1: false,
      specialtyCode: '',
      label_style: {
        fontWeight: 'bold'
      }
    }
  },

  onLoad(option) {
    if (option.data) {
      this.form = JSON.parse(option.data)
    }
    this.specialtyCode = option.code
  },

  mounted() {
    this.getProvince()
    this.getSubject()
  },

  onShareAppMessage(res) {
    return {
      path: getCurrentFullPath()
    }
  },

  methods:{
    getProvince() {
      request({
        url: '/system/wx/provinceName/list',
        token: true
      }).then(res => {
        let arr = res.data.map((item, index) => {
          return {
            label: item,
            value: item
          }
        })
        this.provinceList = arr
      })
    },

    getSubject() {
      request({
        url: '/system/wx/firstSubject/list',
        token: true
      }).then(res => {
        let arr = res.data.map((item, index) => {

          return {
            label: item,
            value: item
          }
        })
        this.firstSubjectList = arr
      })
    },

    actionSheetCallback(res, type) {
      this.form[type] = res[0].label
    },

    jump(path) {
      if (!this.form.provinceName || !this.form.firstSubject || !this.form.specialtyName || !this.form.userOrder) {
        TOAST('请完善表单信息！')
        return
      }
      let p = `${path}?data=${JSON.stringify(this.form)}&c=${this.specialtyCode}`
      this.$u.route({
        url: p
      })
    },

    toSelect() {
      let params = JSON.stringify(this.form)
      let p = `/pages/explore/zhuanye?type=select&data=${params}`
      this.$u.route({
        url: p
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  flex-direction: column;
  height: 100%;
  .top {
    position: relative;
    .bg {
      background: linear-gradient(rgb(39,148,217), rgb(156,210,244));
      height: 500upx;
      border-radius: 0 0 100upx 100upx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
    }
  }
}
</style>